LOGICAL OPERATORS IN JAVASCRIPT

This note explains:

• Boolean type conversion
• logical AND &&
• logical OR ||
• logical NOT !

These topics are very important because logical operators are used in:

• if statements
• branching
• checking several conditions
• form validation
• permissions
• login and chat logic
• real full stack applications

1. What are logical operators?

Logical operators help JavaScript work with conditions.

They are used when a program needs to answer questions like:

• Is the user online and not blocked?
• Is the screen mobile or desktop?
• Is this value not empty?

The three main logical operators are:

• && — AND
• || — OR
• ! — NOT

Diagram 1. Main logical operators

Logical operators
│
├─ &&  → AND
├─ ||  → OR
└─ !   → NOT

Explanation

• && needs all important parts to be true
• || needs at least one important part to be true
• ! changes a value to the opposite Boolean result

2. Boolean type conversion

Before learning logical operators, you must understand Boolean conversion.

Boolean conversion means converting any value into:

• true
• or false

This happens in two ways:

1. explicitly with Boolean(value)
2. implicitly inside conditions like if (...)

Diagram 2. Boolean conversion idea

Any value
   ↓
Boolean conversion
   ↓
true or false

Explanation

JavaScript often decides whether a value is truthy or falsy.

That is why Boolean conversion is so important.

3. Boolean values stay the same

If the value is already Boolean, it does not change.

console.log(Boolean(true));  // true
console.log(Boolean(false)); // false

Diagram 3. Boolean values

true  → true
false → false

Explanation

Real Boolean values do not need conversion to something else.

They already are Boolean.

4. Numbers and Boolean conversion

Some numbers become false, and others become true.

These become false

• 0
• NaN

These become true

• 3.14
• -10
• 25
• any other number except 0 and NaN

Examples

console.log(Boolean(NaN));       // false
console.log(Boolean(0));         // false
console.log(Boolean(3.14));      // true
console.log(Boolean(-10));       // true
console.log(Boolean(100));       // true

Diagram 4. Number conversion to Boolean

Falsy numbers:
0
NaN

Truthy numbers:
3.14
-10
100
1
999

Explanation

Only 0 and NaN are falsy here.

All other numbers are truthy.

5. null and undefined

These two special values are always converted to false.

console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false

Diagram 5. Special falsy values

null      → false
undefined → false

Explanation

These values usually mean “no value”, so JavaScript treats them as falsy.

6. Strings and Boolean conversion

Strings follow a simple rule:

• empty string "" → false
• any non-empty string → true

Examples

console.log(Boolean(""));        // false
console.log(Boolean("hello"));   // true
console.log(Boolean("false"));   // true
console.log(Boolean("0"));       // true

Diagram 6. String conversion to Boolean

""        → false
"hello"   → true
"false"   → true
"0"       → true
"batman"  → true

Explanation

This confuses many beginners:

• "false" is not false
• "0" is not false

They are strings, and non-empty strings are truthy.

7. The 6 falsy values you must remember

JavaScript has 6 common values that become false in Boolean conversion:

1. 0
2. ""
3. NaN
4. null
5. undefined
6. false

Everything else in this beginner topic is truthy.

Diagram 7. The 6 falsy values

Falsy values:
1. 0
2. ""
3. NaN
4. null
5. undefined
6. false

Explanation

This list is very important.

It appears again and again in if, &&, ||, and !.

8. Boolean conversion inside if

if does not need only true or false.

JavaScript can convert other values automatically.

Example with null

if (null) {
  console.log("Block if");
} else {
  console.log("Block else");
}

Output:

Block else

Why?

Because null becomes false.

Diagram 8. if (null)

null
 ↓
false
 ↓
else block runs

Explanation

The if block is skipped because the condition becomes false.

9. Another if example with 0

if (0) {
  console.log("Block if");
} else {
  console.log("Block else");
}

Output:

Block else

Because 0 is falsy.

Diagram 9. if (0)

0
 ↓
false
 ↓
else block runs

Explanation

0 is one of the most important falsy values.

10. Example with a truthy number

if (5) {
  console.log("Block if");
} else {
  console.log("Block else");
}

Output:

Block if

Because 5 becomes true.

Diagram 10. if (5)

5
 ↓
true
 ↓
if block runs

Explanation

A non-zero number is truthy.

11. Example with an empty string

if ("") {
  console.log("Block if");
} else {
  console.log("Block else");
}

Output:

Block else

Diagram 11. if ("")

""
 ↓
false
 ↓
else block runs

Explanation

An empty string is falsy.

12. Example with a non-empty string

if ("batman") {
  console.log("Block if");
} else {
  console.log("Block else");
}

Output:

Block if

Diagram 12. if ("batman")

"batman"
   ↓
true
   ↓
if block runs

Explanation

A non-empty string is truthy.

13. Logical AND &&

The AND operator checks whether conditions work together.

Syntax

expression1 && expression2

It is read like this:

• “expression1 AND expression2”

The idea is:

• if the left side is falsy, stop there
• if the left side is truthy, continue to the right

Diagram 13. Main idea of &&

Left operand
   ↓
If falsy  → stop and return it
If truthy → check right operand
               ↓
            return right result

Explanation

&& moves from left to right and stops at the first falsy value.

If it finds no falsy value, it returns the last value.

14. Very important rule for &&

The AND operator does not always return true or false.

It returns:

• the first falsy operand
• or the last truthy operand if all are truthy

This is one of the most important JavaScript rules.

Diagram 14. Return rule of &&

AND returns:
- first falsy value
or
- last value if all are truthy

Explanation

That is why results like 5, "hello", and 0 are possible.

15. Examples where both operands are truthy

console.log("hello" && 5);       // 5
console.log(5 && "hello");       // "hello"

console.log("aaron" && "benjamin");  // "benjamin"
console.log("benjamin" && "aaron");  // "aaron"

console.log(3 && true);          // true
console.log(true && 3);          // 3

Diagram 15. Truthy AND truthy

"hello" && 5
1. "hello" → truthy
2. continue
3. return 5

5 && "hello"
1. 5 → truthy
2. continue
3. return "hello"

Explanation

If the left operand is truthy, && moves to the right and returns the right side.

16. Examples where a falsy value appears

console.log("hello" && 0);   // 0
console.log(0 && "hello");   // 0

console.log(3 && false);     // false
console.log(false && 3);     // false

console.log(0 && "");        // 0
console.log("" && 0);        // ""

Diagram 16. Falsy stops &&

"hello" && 0
1. "hello" → truthy
2. continue
3. 0 → falsy
4. return 0

0 && "hello"
1. 0 → falsy
2. stop
3. return 0

Explanation

As soon as && finds a falsy value, it stops.

This is called short-circuit behavior.

17. && with comparisons

In real code, && is often used with conditions.

Example

const a = 20;
console.log(a > 10 && a < 30); // true && true -> true

const b = 50;
console.log(b > 10 && b < 30);   // true && false -> false
console.log(b > 80 && b < 120);  // false && true -> false

Diagram 17. && with range checks

a = 20

Check:
a > 10   → true
a < 30   → true

true && true
   ↓
true

Explanation

&& is perfect when all conditions must be satisfied at the same time.

18. Real example: screen size check with &&

const screenWidth = 700;
const sm = 320;
const md = 768;
const lg = 1200;

if (screenWidth <= sm) {
  console.log("Mobile screen");
} else if (screenWidth > sm && screenWidth <= md) {
  console.log("Tablet screen");
} else if (screenWidth > md && screenWidth <= lg) {
  console.log("Desktop screen");
} else {
  console.log("Godzilla screen");
}

Output:

Tablet screen

Diagram 18. How tablet condition works

screenWidth = 700

Check:
700 > 320   → true
700 <= 768  → true

true && true
   ↓
true
   ↓
"Tablet screen"

Explanation

Both parts of the tablet condition are true, so the tablet branch runs.

19. Function example with &&

function getScreenType(screenWidth) {
  const sm = 320;
  const md = 768;
  const lg = 1200;

  if (screenWidth <= sm) {
    return "Mobile screen";
  } else if (screenWidth > sm && screenWidth <= md) {
    return "Tablet screen";
  } else if (screenWidth > md && screenWidth <= lg) {
    return "Desktop screen";
  } else {
    return "Godzilla screen";
  }
}

console.log(getScreenType(700));  // "Tablet screen"
console.log(getScreenType(1200)); // "Desktop screen"
console.log(getScreenType(1500)); // "Godzilla screen"
console.log(getScreenType(320));  // "Mobile screen"

Diagram 19. Full screen type logic

screenWidth <= 320 ?
│
├─ yes → Mobile screen
└─ no
    ↓
screenWidth > 320 && screenWidth <= 768 ?
│
├─ yes → Tablet screen
└─ no
    ↓
screenWidth > 768 && screenWidth <= 1200 ?
│
├─ yes → Desktop screen
└─ no  → Godzilla screen

Explanation

This is a very practical example of AND in real branching.

20. Logical OR ||

The OR operator checks whether at least one operand is truthy.

Syntax

expression1 || expression2

It is read like this:

• “expression1 OR expression2”

Diagram 20. Main idea of ||

Left operand
   ↓
If truthy → stop and return it
If falsy  → check right operand
               ↓
            return right result

Explanation

OR moves from left to right and stops at the first truthy value.

21. Very important rule for ||

The OR operator does not always return true or false.

It returns:

• the first truthy operand
• or the last operand if all are falsy

Diagram 21. Return rule of ||

OR returns:
- first truthy value
or
- last value if all are falsy

Explanation

That is why results like 5, "hello", false, and "" are possible.

22. Examples where a truthy value is found

console.log(true || false);    // true
console.log(false || true);    // true

console.log(5 || false);       // 5
console.log(false || 5);       // 5

console.log("hello" || 0);     // "hello"
console.log(0 || "hello");     // "hello"

Diagram 22. Truthy stops ||

5 || false
1. 5 → truthy
2. stop
3. return 5

false || 5
1. false → falsy
2. continue
3. return 5

Explanation

As soon as OR finds a truthy value, it stops.

23. More examples of OR

console.log(5 || 3);               // 5
console.log(3 || 5);               // 3

console.log("aaron" || "benjamin");    // "aaron"
console.log("benjamin" || "aaron");    // "benjamin"

Diagram 23. First truthy wins

"aaron" || "benjamin"
1. "aaron" → truthy
2. stop
3. return "aaron"

Explanation

The first truthy operand wins.

24. When all OR operands are falsy

console.log(0 || false);    // false
console.log(false || 0);    // 0

console.log(null || "");    // ""
console.log("" || null);    // null

Diagram 24. All falsy with OR

0 || false
1. 0 → falsy
2. continue
3. false → falsy
4. return last operand → false

Explanation

If OR finds no truthy value, it returns the last operand.

25. || with comparisons

const a = 5;
console.log(a < 10 || a > 30); // true || false -> true

const b = 50;
console.log(b < 10 || b > 30); // false || true -> true

const c = 20;
console.log(c - 20 || c * 2);  // 0 || 40 -> 40

Diagram 25. At least one condition must be true

b = 50

Check:
b < 10   → false
b > 30   → true

false || true
   ↓
true

Explanation

OR is useful when one correct condition is enough.

26. OR inside if

const screenWidth = 700;
const sm = 320;
const md = 768;
const lg = 1200;

if (screenWidth <= sm || screenWidth > md) {
  console.log("Mobile or Desktop screen");
}

In this example:

• 700 <= 320 → false
• 700 > 768 → false

So nothing is printed.

Diagram 26. OR in this screen example

screenWidth = 700

Check:
700 <= 320 → false
700 > 768  → false

false || false
   ↓
false
   ↓
if block does not run

Explanation

OR needs at least one truthy condition.

Here both are false.

27. Logical NOT !

The NOT operator is different because it is unary.

That means it works with only one operand.

Syntax

!expression

What it does:

1. converts the value to Boolean
2. changes it to the opposite

So:

• true becomes false
• false becomes true

Diagram 27. How ! works

value
 ↓
convert to Boolean
 ↓
reverse it

Explanation

! means “not”.

28. Examples of !

console.log(!true);      // false
console.log(!false);     // true
console.log(!3);         // false
console.log(!"Aaron");   // false
console.log(!0);         // true
console.log(!"");        // true
console.log(!null);      // true

Diagram 28. NOT examples step by step

!3
3 → true
!true → false

!0
0 → false
!false → true

Explanation

NOT always turns the Boolean result into the opposite.

29. Using ! in real logic

Imagine a user can write in chat only if they are not blocked.

const isBlocked = false;
const canChat = !isBlocked; // !false -> true

if (canChat) {
  console.log("Can type in chat!");
} else {
  console.log("Blocked from typing in chat!");
}

Output:

Can type in chat!

Diagram 29. Not blocked → can chat

isBlocked = false
   ↓
!isBlocked
   ↓
true
   ↓
canChat = true

Explanation

The user is not blocked, so chat is allowed.

30. When user is blocked

const isBlocked = true;
const canChat = !isBlocked; // !true -> false

if (canChat) {
  console.log("Can type in chat!");
} else {
  console.log("Blocked from typing in chat!");
}

Output:

Blocked from typing in chat!

Diagram 30. Blocked → cannot chat

isBlocked = true
   ↓
!isBlocked
   ↓
false
   ↓
canChat = false

Explanation

The user is blocked, so chat is not allowed.

31. Combining && and !

Sometimes conditions depend on more than one rule.

For example, a user can chat only if:

• the user is online
• and the user is not blocked

const isOnline = true;
const isBlocked = false;
const canChat = isOnline && !isBlocked;

if (canChat) {
  console.log("Can type in chat!");
} else {
  console.log("Blocked from typing in chat!");
}

Output:

Can type in chat!

Diagram 31. Chat permission logic

canChat = isOnline && !isBlocked

Need both:
1. isOnline = true
2. isBlocked = false → !isBlocked = true

true && true
   ↓
true

Explanation

This is a very common real-world logic pattern.

32. Function example: canUserChat(isOnline, isBlocked)

function canUserChat(isOnline, isBlocked) {
  const canChat = isOnline && !isBlocked;

  if (canChat) {
    return "Can type in chat!";
  } else {
    return "Blocked from typing in chat!";
  }
}

console.log(canUserChat(true, false));  // "Can type in chat!"
console.log(canUserChat(true, true));   // "Blocked from typing in chat!"
console.log(canUserChat(false, false)); // "Blocked from typing in chat!"
console.log(canUserChat(false, true));  // "Blocked from typing in chat!"

Diagram 32. All cases for canUserChat()

isOnline  isBlocked   Result
--------------------------------
true      false       Can type in chat!
true      true        Blocked from typing in chat!
false     false       Blocked from typing in chat!
false     true        Blocked from typing in chat!

Explanation

Only one combination allows chat:

• online = true
• blocked = false

33. Step-by-step understanding of canUserChat(true, false)

canUserChat(true, false)

Break it down:

• isOnline = true
• isBlocked = false
• !isBlocked = true
• true && true = true

So the function returns:

Can type in chat!

Diagram 33. Step-by-step breakdown

isOnline = true
isBlocked = false

!isBlocked = true

true && true
   ↓
true
   ↓
"Can type in chat!"

Explanation

Breaking logic into small steps helps a lot when learning.

34. Short-circuit behavior

Both && and || use short-circuit evaluation.

This means they may stop early.

For &&

• stops at the first falsy value

For ||

• stops at the first truthy value

Diagram 34. Short-circuit rules

&& stops at first falsy
|| stops at first truthy

Explanation

This is why the second operand is sometimes never evaluated.

35. Common beginner mistakes

Mistake 1. Thinking && always returns true or false

Wrong idea.

console.log("hello" && 5); // 5

The result is 5, not true.

Mistake 2. Thinking || always returns true or false

Wrong idea.

console.log(0 || "hello"); // "hello"

The result is "hello".

Mistake 3. Thinking "false" is falsy

Wrong.

console.log(Boolean("false")); // true

Because "false" is a non-empty string.

Mistake 4. Forgetting the 6 falsy values

Beginners often forget values like:

• ""
• NaN
• null

Mistake 5. Confusing !value with “value is false in meaning”

!"Aaron" // false

This does not mean "Aaron" is false in human meaning.

It means the string is truthy, and NOT changes it to false.

Diagram 35. Common mistakes

1. && does not always return Boolean
2. || does not always return Boolean
3. "false" is truthy
4. Non-empty strings are truthy
5. ! reverses Boolean conversion result

Explanation

These mistakes are very common, so they are worth reviewing several times.

36. Quick comparison of the three operators

AND &&

Needs all important parts to work.

OR ||

Needs at least one important part to work.

NOT !

Reverses the Boolean result.

Diagram 36. One-line meaning of each operator

&&  → all needed
||  → at least one needed
!   → opposite result

Explanation

This is the easiest memory rule for the three operators.

37. Full summary

Boolean conversion

Changes any value into true or false.

The 6 falsy values

0, "", NaN, null, undefined, false

Truthy values

Almost everything else, including non-zero numbers and non-empty strings.

AND &&

Returns the first falsy operand, or the last operand if all are truthy.

OR ||

Returns the first truthy operand, or the last operand if all are falsy.

NOT !

Converts a value to Boolean and reverses it.

Short-circuit

&& stops early at the first falsy value.

|| stops early at the first truthy value.

Diagram 37. Final logical operators map

Logical operators
│
├─ Boolean conversion
│  ├─ truthy
│  └─ falsy
│
├─ &&
│  ├─ first falsy
│  └─ or last truthy
│
├─ ||
│  ├─ first truthy
│  └─ or last falsy
│
└─ !
   └─ opposite Boolean result

Explanation

This is the full picture of the topic.

38. Revision block

1. Boolean conversion changes values into true or false
2. The 6 falsy values are 0, "", NaN, null, undefined, and false
3. Non-empty strings are truthy
4. Non-zero numbers are truthy
5. && returns the first falsy value or the last value
6. || returns the first truthy value or the last value
7. ! changes a Boolean result to the opposite
8. && is good when all conditions must be true
9. || is good when at least one condition must be true
10. ! is good for checking the opposite condition

39. Final conclusion

Logical operators are one of the foundations of JavaScript.

If you understand:

• Boolean conversion
• truthy and falsy values
• how && works
• how || works
• how ! works
• short-circuit behavior

then you will understand a huge part of real JavaScript logic.

These operators are used everywhere in full stack development:

• access checks
• validation
• screen logic
• user permissions
• online/offline logic
• form handling
• backend conditions